<template>
	<div class="detail">
		<!-- 案件情况 -->
		<div class="solution">
			<div class="solution-item">
				<span>案件类型</span>
				：
				<span>{{ detailInfo.caseType | getType }}</span>
			</div>
			<div class="solution-item">
				<span>案发地址</span>
				：
				<span>{{ detailInfo.caseAddress }}</span>
			</div>
			<div class="solution-item">
				<span>主管机构</span>
				：
				<span>{{ detailInfo.manageUnit }}</span>
			</div>
			<div class="solution-item">
				<span>出动力量</span>
				：
				<span>{{ outPower }}</span>
			</div>
			<div class="solution-item">
				<span>案发时间</span>
				：
				<span>{{ detailInfo.caseTime }}</span>
			</div>
			<div class="solution-item">
				<span>负责人</span>
				：
				<span style="margin-right: 30px">{{ managePerson }}</span>
				<span>
					<el-button type="text" size="mini">一键呼叫</el-button>
				</span>
			</div>
		</div>
		<!-- 表格展示 -->
		<div class="card">
			<div class="card-title">出动人员（ {{ personNum }} ）人</div>
			<div class="table">
				<div class="table-item" v-for="(item, index) in tableList" :key="index">
					<div class="table-item__head" v-if="index == 0">
						<span>主战单位</span>
						<span>
							<el-button type="text" size="mini" @click="add(0)">添加主战单位</el-button>
						</span>
					</div>
					<div class="table-item__head" v-if="index == 1">
						<span>增援单位</span>
						<span>
							<el-button type="text" size="mini" @click="add(1)">添加增援单位</el-button>
						</span>
					</div>
					<div class="table-item__tool">
						<div class="table-item__title">
							{{ index > 0 ? index + '、' : '' }}{{ item.title }}
						</div>
						<el-button
							v-if="index !== 0 && hasData_add"
							type="info"
							size="mini"
							plain
							@click="add(1, index)"
						>
							编辑
						</el-button>
					</div>
					<el-table :data="item.tableData" border style="width: 100%">
						<el-table-column type="selection" align="center"></el-table-column>
						<el-table-column align="center" prop="firemanName" label="姓名"></el-table-column>
						<el-table-column align="center" prop="orgName" label="所属结构"></el-table-column>
						<el-table-column align="center" prop="firemanJob" label="职务"></el-table-column>
						<el-table-column align="center" prop="firemanPhone" label="电话"></el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<div class="button mt20">
			<el-button size="small" type="info">呼叫</el-button>
			<el-button size="small">监听强插</el-button>
			<el-button size="small">录音通知</el-button>
			<el-button size="small">邀请入会</el-button>
		</div>

		<!-- 出动人员弹窗 -->
		<el-dialog title="出动人员" :visible.sync="showPerson" width="80%">
			<div class="dialog">
				<div class="dialog-tools">
					<div class="dialog-tools__item">
						<span v-if="fightType">请选择主战单位：</span>
						<span v-else>请选择救援单位：</span>
						<el-select
							size="small"
							@change="changeUnit"
							v-model="mainCompany"
							placeholder="请选择"
						>
							<el-option
								v-for="item in select_main"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</div>
					<div class="dialog-tools__item" v-if="fightType">
						<span>出动力量：</span>
						<el-input size="small" v-model="inputValue" placeholder="请输入"></el-input>
					</div>
					<div class="dialog-tools__item" v-if="fightType">
						<span>负责人：</span>
						<el-select size="small" filterable v-model="managePersonId" placeholder="请选择">
							<el-option
								v-for="item in select_person"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</div>
				</div>
				<!-- 表格展示 -->
				<div class="table mt15">
					<el-table
						:data="tableData"
						border
						ref="selectTable"
						style="width: 100%"
						v-loading="loading"
						@selection-change="selectChange"
					>
						<el-table-column width="60" type="selection" align="center"></el-table-column>
						<el-table-column align="center" prop="firemanName" label="姓名"></el-table-column>
						<el-table-column align="center" prop="firemanJob" label="职务"></el-table-column>
						<el-table-column align="center" prop="firemanPhone" label="电话"></el-table-column>
						<el-table-column align="center" prop="orgName" label="组织名称"></el-table-column>
					</el-table>
				</div>
				<!-- 翻页 -->
				<div class="mt15">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="searchInfo.pageNum"
						:page-size="searchInfo.pageSize"
						:page-sizes="[10, 20, 50]"
						:total="totalPage"
						background
						layout="sizes, prev, pager, next, jumper"
					></el-pagination>
				</div>
			</div>
			<div slot="footer">
				<el-button type="info" size="small" @click="sure">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
import { turnPage } from '@/mixins/turnPage';
import {
	getOrgUnitApi,
	getFireManInfoApi,
	addCaseDetailsApi,
	addOrUpdateApi,
	getFightUnitApi
} from '@/utils/api';

export default {
	name: 'Detail',
	mixins: [turnPage],
	data() {
		return {
			hasData_main: false, // 是否已经添加主战单位
			hasData_add: false, // 是否已经添加增援单位
			flag: true /* 是否清空负责人下拉标志 */,
			showPerson: false,
			loading: false,
			fightType: '',
			personNum: 0 /* 出动人员统计 */,
			detailInfo: '',
			outPower: '--' /* 出动力量 */,
			managePerson: '--' /* 负责人 */,
			mainCompany: '',
			inputValue: '',
			managePersonId: '',
			select_main: [] /* 组织单位下拉 */,
			select_main_storage: [],
			select_person: [] /* 负责人下拉 */,
			tableData: [],
			totalPage: 1,
			searchInfo: {
				pageNum: 1,
				pageSize: 10,
				orgId: ''
			},
			tableList: [
				{
					title: '未选择',
					tableData: []
				},
				{
					title: '未选择',
					tableData: []
				}
			] /* 表格列表 */,
			unitIndex: '' /* 选择的救援单位索引 */
		};
	},
	filters: {
		getType(val) {
			switch (val) {
				case '1':
					return '火灾扑救';
				case '2':
					return '抢险救援';
				case '3':
					return '社会援助';
				default:
					return '其他灾情';
			}
		},
		getStatus(val) {
			switch (val) {
				case '1':
					return '处理中';
				default:
					return '已结案';
			}
		}
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.detailInfo = JSON.parse(decodeURIComponent(this.$route.query.detail));
			this.getOrgUnit();
			this.getFightUnit();
		},

		// 获取主管单位列表
		async getOrgUnit() {
			const res = await getOrgUnitApi();

			if (res.success) {
				this.select_main = [];

				res.data.map((item) => {
					this.select_main.push({
						value: item.orgId,
						label: item.orgName
					});
				});

				this.select_main_storage = $xy.DC(this.select_main);
			} else {
				this.$toast(res.msg);
			}
		},

		// 获取作战单位具体信息
		async getFightUnit() {
			this.tableList = [
				{
					title: '未选择',
					tableData: []
				},
				{
					title: '未选择',
					tableData: []
				}
			];

			const res = await getFightUnitApi({
				caseId: this.detailInfo.id
			});

			if (res.success) {
				this.detailInfo = res.data.case;
				this.outPower = this.detailInfo.outPower;
				this.managePerson = this.detailInfo.director;
				this.hasData_main = false;
				this.hasData_add = false;

				let num = 0;
				res.data.fireman.map((item) => {
					if (item.type == '1') {
						this.hasData_main = true;
						this.tableList[0].title = item.orgName;
						this.tableList[0].tableData = item.fireman;
					} else {
						if (num == 0) {
							this.hasData_add = true;
							this.tableList[1].title = `${item.orgName}`;
							this.tableList[1].tableData = item.fireman;
							num++;
						} else {
							this.tableList.push({
								title: `${item.orgName}`,
								tableData: item.fireman
							});
						}
					}
					this.personNum += item.person;
				});
			} else {
				this.$toast(res.msg);
			}
		},

		// 切换单位
		changeUnit(val) {
			this.select_person = [];

			if (this.fightType) {
				// 主战单位切换组织
				if (this.hasData_main && this.mainCompany == this.tableList[0].tableData[0].orgId) {
					// 当前默认选中项
					this.tableList[0].tableData.map((item) => {
						this.select_person.push({
							value: item.id,
							label: item.firemanName
						});
					});

					// 暂时用姓名判断选中负责人id
					this.select_person.map((item) => {
						if (item.label === this.detailInfo.director) {
							this.managePersonId = item.value;
						}
					});
				} else {
					this.managePersonId = '';
				}
			} else {
				// 增援单位切换组织
				if (val) {
					// 通过下拉列表切换
					this.tableList.map((i, index) => {
						if (this.hasData_add && index > 0 && i.tableData[0].orgId == val) {
							i.tableData.map((j) => {
								this.select_person.push({
									value: j.id,
									label: j.firemanName
								});
							});
						}
					});
				} else {
					// 当前默认选中项 通过编辑按钮切换
					this.tableList[this.unitIndex].tableData.map((item) => {
						this.select_person.push({
							value: item.id,
							label: item.firemanName
						});
					});
				}
			}

			this.searchInfo.orgId = this.mainCompany;
			this.searchInfo.pageNum = 1;
			this.searchInfo.pageSize = 10;
			this.queryTable();
		},

		// 查询表格数据
		async queryTable() {
			this.flag = false;
			this.loading = true;
			const res = await getFireManInfoApi(this.searchInfo);
			this.loading = false;

			if (res.success) {
				this.totalPage = res.data.total;
				this.tableData = res.data.list;

				// 根据上次选中状态设置表格的默认选中
				this.select_person.map((i) => {
					this.tableData.map((j) => {
						if (i.value == j.id) {
							setTimeout(() => {
								this.$refs.selectTable.toggleRowSelection(j, true);
							});
						}
					});
				});

				setTimeout(() => {
					this.flag = true;
				}, 10);
			} else {
				this.$toast(res.msg);
			}
		},

		// 表格选中
		selectChange(val) {
			// 更新表格默认选择的时候不更新下拉列表的数据
			if (this.flag) {
				this.managePersonId = '';
				// 下拉数据全部清空 再根据选中内容添加
				this.tableData.map((i) => {
					this.select_person.map((j, index) => {
						if (i.id == j.value) {
							this.select_person.splice(index, 1);
						}
					});
				});

				val.map((item) => {
					this.select_person.push({
						value: item.id,
						label: item.firemanName,
						phone: item.firemanPhone
					});
				});
			}
		},

		// 确定负责人
		async sure() {
			if (this.select_person.length == 0) {
				this.$message.error('请选择消防员');
			} else if (!this.inputValue && this.fightType) {
				this.$message.error('请填写出动力量');
			} else if (!this.managePersonId && this.fightType) {
				this.$message.error('请选择负责人');
			} else {
				let firemanId = [];
				let orgName = '';
				let detailId = '';

				this.select_person.map((item) => {
					firemanId.push(item.value);
				});

				this.select_main.map((item) => {
					if (item.value == this.mainCompany) {
						orgName = item.label;
					}
				});

				if (this.hasData_add) {
					detailId = this.tableList[this.unitIndex].tableData[0].detailId || '';
				}

				let formData = {
					id: detailId,
					caseId: this.detailInfo.id,
					firemanId: firemanId.join(','),
					fightType: this.fightType ? '1' : '2',
					orgId: firemanId.length == 0 ? '' : this.mainCompany,
					orgName: firemanId.length == 0 ? '' : orgName
				};

				const res = await addCaseDetailsApi(formData);

				if (res.success) {
					if (this.fightType) {
						let director = '',
							directorPhone = '';
						this.select_person.map((item) => {
							if (item.value == this.managePersonId) {
								director = item.label;
								directorPhone = item.phone;
							}
						});

						const ress = await addOrUpdateApi({
							id: this.detailInfo.id,
							outPower: this.inputValue,
							director,
							directorPhone
						});

						if (ress.success) {
							this.showPerson = false;
							this.$message.success('操作成功');
							this.getFightUnit();
						} else {
							this.$toast(res.msg);
						}
					} else {
						this.showPerson = false;
						this.$message.success('操作成功');
						this.getFightUnit();
					}
				} else {
					this.$toast(res.msg);
				}
			}
		},

		// 添加单位
		add(type, index = 0) {
			this.showPerson = true;
			this.tableData = [];
			this.mainCompany = '';
			this.select_person = [];
			this.searchInfo.pageNum = 1;
			this.searchInfo.pageSize = 10;

			if (type) {
				/* 救援单位 */
				this.fightType = 0;
				this.select_main = $xy.DC(this.select_main_storage);
				this.select_main.map((item, index) => {
					if (this.hasData_main && item.value == this.tableList[0].tableData[0].orgId) {
						this.select_main.splice(index, 1);
					}
				});

				if (index > 0) {
					this.unitIndex = index;
					this.mainCompany = this.hasData_add ? this.tableList[index].tableData[0].orgId : '';
					this.hasData_add && this.changeUnit();
				}
			} else {
				/* 主战单位 */
				this.select_main = $xy.DC(this.select_main_storage);
				let arr = [];
				this.select_main.map((i, index) => {
					this.tableList.map((j, indexx) => {
						if (this.hasData_add && indexx > 0 && i.value == j.tableData[0].orgId) {
							arr.push(index);
						}
					});
				});
				arr.map((item) => {
					this.select_main.splice(item, 1);
				});
				this.fightType = 1;
				this.mainCompany = this.hasData_main ? this.tableList[0].tableData[0].orgId : '';
				this.inputValue = this.detailInfo.outPower;

				this.hasData_main && this.changeUnit();
			}
		}
	}
};
</script>
 
<style lang="scss">
.detail {
	font-size: 14px;
	padding: 5px;

	.solution {
		width: 100%;
		color: #787878;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;

		.solution-item {
			width: 70%;
			margin-bottom: 10px;

			&:nth-child(1) {
				width: 25%;
			}

			&:nth-child(3) {
				width: 25%;
			}

			&:nth-child(5) {
				width: 25%;
			}

			& > span {
				&:first-child {
					display: inline-block;
					width: 60px;
					text-align: justify;
					text-align-last: justify;
				}

				&:nth-child(3) {
					cursor: pointer;
					&:hover {
						color: rgb(106, 193, 255);
					}
				}
			}
		}
	}

	.card {
		margin: 10px 0 0 0;
		border-radius: 3px;

		.card-title {
			margin-bottom: 10px;
			font-size: 16px;
			color: rgb(2, 117, 167);
		}

		.table {
			.table-item__head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10px;
				padding-left: 8px;
				position: relative;

				&::after {
					display: block;
					content: '';
					position: absolute;
					left: 0;
					height: 72%;
					width: 3px;
					background-color: rgb(0, 177, 226);
				}
			}

			.table-item__tool {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8px;
			}

			.table-item__title {
				color: #666;
				font-size: 13px;
			}
		}

		.el-table {
			margin-bottom: 15px;
		}
	}

	.el-dialog__body {
		padding: 0 20px 10px;
	}

	.dialog {
		min-height: 400px;
		.dialog-tools {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		&-tools__item {
			display: flex;
			align-items: center;
			margin-right: 20px;

			&:nth-child(2) > span {
				display: inline-block;
				width: 120px;
			}
		}
	}
}
</style>